<template>
  <div class="cont">
    <div class="base">
      <div class="cont_box">
        <div class="tabs">
          <div class="tab tab_active" onclick="changeTab(0)" v-if="step == 1">注册</div>
          <div class="tab tab_active" onclick="changeTab(0)" v-if="step == 2">设置密码</div>
        </div>
        <div class="form form_active" v-if="step == 1">
          <div class="form_item">
            <input type="tel" v-model="form.phone" placeholder="请输入手机号码" />
          </div>
          <div class="form_item">
            <div class="flex justify-between">
              <input type="text" v-model="form.varCode" placeholder="请输入验证码" />
              <a v-if="!countdown" href="javascript:void(0)" @click="getSms">获取验证码</a>
              <span v-if="countdown">{{countdown}}</span>
            </div>
          </div>
          <div style="text-align: center">
            <button @click="goPassword" type="button">注册</button>
          </div>
        </div>
        <div class="form form_active" v-if="step == 2">
          <div class="form_item">
            <input type="password" v-model="password" placeholder="请设置密码" />
          </div>
          <div style="text-align: center">
            <button @click="register" type="button">设置密码注册</button>
            <router-link to="/form/more" style="margin-top: 60px; float: right;">跳过</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const config = require("@/../config.js");
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      countdown: 0,
      password: "",
      step: 1,
      form: {
        phone: undefined,
        varCode: undefined,
        clientId: "01q2yiW0x54m7PlE9AqxXc",
        // clientId: "1qUvjuFXqi3rpr88epJwfw",
        clientSecret: "ToWFZGGUkkCv3Y64CmT33FP3bsXS9tMa"
      }
    };
  },
  created() {},
  methods: {
    ...mapMutations(["SET_REGISTER"]),
    async register() {
      if (!this.password) {
        this.$message({
          message: "请输入密码",
          type: "warning"
        });
        return;
      }
      this.SET_REGISTER({
        ...this.form,
        password: this.password
      });
      this.$router.push("/form/more");
    },
    async goPassword() {
      if (!this.form.phone) {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
        return;
      }
      if (!this.form.varCode) {
        this.$message({
          message: "请输入验证码",
          type: "warning"
        });
        return;
      }
      let res = await this.$axios._GET(
        `${config.host2}/api/oss/user/${this.form.phone}/check/${this.form.varCode}`
      );
      if (res.code == "0") {
        this.SET_REGISTER(this.form);
        this.step = 2
      }
    },
    async getSms() {
      if (!this.form.phone) {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
        return;
      }
      const res = await this.$axios._GET(
        `${config.host2}/api/oss/user/${this.form.phone}/register/message`
      );
      if (res.code == "0") {
        this.countdown = 60;
        let dingshi = setInterval(() => {
          this.countdown--;
          if (this.countdown == 0) {
            clearInterval(dingshi);
          }
        }, 1000);
        this.$message({
          message: "已发送，请注意查收短信",
          type: "success"
        });
      }
    }
  }
};
</script>

<style scoped>
@import "../common.css";
</style>